<template>
  <div class="main">
    
    <img src="@/assets/img/bike-banner.jpg" alt="">
    <div class="formLogin">
         
         
             <el-form  
                  ref="userInfo" 
                  :model="userInfo"
                  label-width="auto"         
                  :rules="rules"   
                   :inline="true"                                    
              >
                  <el-form-item label="昵称">
                    <el-input v-model="userInfo.password"></el-input>
                  </el-form-item>  
                  <el-form-item label="手机号" prop='phonenumber'>
                    <el-input v-model="userInfo.phonenumber"></el-input>
                  </el-form-item>     
                  <el-form-item label="密码" prop='password'>
                    <el-input v-model="userInfo.password"></el-input>
                  </el-form-item> 
                  <el-form-item label="再次输入密码" prop='password'>
                    <el-input v-model="userInfo.password"></el-input>
                  </el-form-item>   
                  <el-form-item label="身份证号码">
                    <el-input v-model="userInfo.password"></el-input>
                  </el-form-item>  
                  <el-form-item label="地址" >
                    <el-input v-model="userInfo.password"></el-input>
                  </el-form-item>                                                        
                  <el-form-item class="login_form">
                    <el-button type="primary" @click="onSubmit()">登录</el-button>              
                  </el-form-item>
                  <div class="changeCode" @click='changeCode'>
                  <span>手机验证码登录</span>             
                </div>
              </el-form>  
          
        
    </div>
  </div>
</template>

<script>
import {pwdLogin} from '@/networdk/user'
import { Message } from 'element-ui'
export default {
  name:'loginView',
  data() {
    let checkPhone = (rule,value,callback)=>{
      let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
     
      if(!value){
        callback()
      } else {
        if(phoneReg.test(value)){
          callback()
        } else{
          callback(new Error('手机号不能为空，并且是11位数字'))
        }
      }
    }
     let checkPwd = (rule,value,callback)=>{
      let pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/
     
      if(!value){
        callback()
      } else {
        if(pwdReg.test(value)){
          callback()
        } else{
          callback(new Error('密码不能为空，且是6-15位的数字和字母组成'))
        }
      }
    }
    return {
        isCode:0, // 0表示验证码登录。1表示密码登录 
        userInfo:{
          phonenumber : '',
          password:'',
          type:[] ,    
        },
        activeName:'first',
        // dialogVisible:false,
      
      storage:false,
      
        rules:{
         phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ],
          password:[
            {
              required:'true',
              trigger:'blur',             
              validator:checkPwd,
              message:'密码不能为空，且是6-15位的数字和字母组成'
            }
          ]  
      },

      rule1:{
        phonenumber: [
            {
              required:'true',
              trigger:'blur',                            
              validator:checkPhone,
              message:'手机号不能为空，并且是11位数字',
            }
          ],
      }              
    }
  },
  // props:{   
  //   currentType:Number,
  //   isShow:Boolean
  // },
  computed:{
    changeRules(){
      return this.isCode === 0 ? this.rules1 : ''
    }
  },
  methods: {
   
    register(){
      console.log('点击了注册');
      
      this.$router.push('/register')
    },

    // 手机号+密码登录
    onSubmit(){
      const _Message = Message     
      this.$refs.userInfo.validate((valid)=>{
        console.log(valid);
        if(!valid){          
          _Message({
            type:'error',
            message:'请输入正确的信息格式'
          })
          return;
        } else {        
            let phonenumber = this.userInfo.phonenumber
              let password = this.userInfo.password
              // console.log(phonenumber,password);
              pwdLogin({phonenumber,password}).then(res=>{
                console.log('进入密码登录界面');
                console.log(res);      

                if(res.data.code === 0){
                    _Message({
                      type:'success',
                      message:res.data.data.msg
                      // 跳转页面
                    })
                    console.log(res.data.data.data[0].token);
                    let  userToken = 'Bearer' + res.data.data.data[0].token
                    this.$store.commit('setToken',userToken)
                    this.$router.replace('/')
                  
                } else {
                    _Message({
                      type:'warning',
                      message:res.data.data.msg
                    })
                }
              })               
        }        
      })
    },

    // 手机号+验证码登录
    codeLogin(){
      this.userInfo = {}
      this.$refs.userInfo.clearValidate()
      this.$refs.codeInfo.validate((valid)=>{
        console.log(valid);
      })
    },
    // 切换到用验证码登录
    changeCode(){
        this.$emit('changeCode')
    },


    // 切换到用密码登录
    changePwd(){
      this.isShow = !this.isShow
      // this.isCode = 1
    },
    sendCode(){
      
      console.log('获取短信验证码');
    }    
  },
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 600px;
  position: relative;
}
.main img{
  width: 100%;
  height: 100%;
}

.formLogin{
  width: 718px;
  height: 400px;
  border: 1px solid red;
  position: absolute;
  top: 55px;
  right: 72px;
  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.formLogin .el-form{
  border: 1px solid red;

}


.el-form-item__label-wrap{ 
  margin-left: 0px !important;
 }

.login_form{
  display: flex;
  justify-content: center;
}
 .el-button{
   width:200px;
   border: 1px solid red;
 }
</style>